<?php
session_start();
$user= isset($_SESSION["user"])?$_SESSION["user"]:null;
$themes = isset($_GET["themes"])?$_GET["themes"]:"";
if(!$themes){
    $$themes = $_COOKIE["themes"];
}else{
    setcookie("themes",$themes);
}
if(!$themes) $themes = "default";
$userId= $user?$user["Id"]:null;
$pageSize = 5;
$pageIndex = isset($_GET["pageIndex"])?$_GET["pageIndex"]:1;
$pageCount = 0;
$startRow = ($pageIndex-1)*$pageSize;
$sql = "select * from `article`";
$where = "";
$queryTitle = isset($_GET["Title"])?$_GET["Title"]:null;
if($queryTitle){
   
    $where .= "Title like ('%$queryTitle%')";
}

$queryAuthor = isset($_GET["Author"])?$_GET["Author"]:null;
if($queryAuthor){
    
    if($where) $where .= " AND ";
    $where .= "AuthorName like ('%$queryAuthor%')";
}
$queryMinDate = isset($_GET["minDate"])?$_GET["minDate"]:null;
if($queryMinDate){
    if($where) $where .=" AND ";
    $where .=" CreateTime <='$queryMinDate'";
}

$queryMaxDate = isset($_GET["maxDate"])?$_GET["maxDate"]:null;
if($queryMinDate){
    if($where) $where .=" AND ";
    $where .=" CreateTime >='$queryMaxDate'";
}
if($where) $sql .= " WHERE $where";


$conn = new mysqli("localhost","root","","myblog");
$rows = [];
$sql .= " LIMiT $startRow,$pageSize";
$rs = $conn->query($sql);
if($conn->error) die($conn->error);
while($row = $rs->fetch_assoc()){
    $rows[] = $row;
}
$rs->close();
$total = 0;
$sql = "SELECT count(Id) as t FROM `article`";


if($where) $sql .= " WHERE $where";
//echo $sql;
$rs = $conn->query($sql);
$total = $rs->fetch_assoc()["t"];
$pageCount = ceil($total/$pageSize);
function makePageUrl($pageIndex){
    $querystring = " pageIndex=$pageIndex";
    foreach($_GET as $k=>$v){
        if($k==="pageIndex") continue;
        $querystring .= "&$k=$v";

    }
    return $querystring;
}
?>


<!DOCTYPE html>
<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf8"/>
            <title>第一个网页</title>
            <link type="text/css" rel="stylesheet" href="themes/<?=$themes?>.css"/>
        </head>
        <body>
            <div class="layout">
                <div id="header" class="container">
                    <div id="caption-info" class="container">
                        <h1 class="col-9">我的博客系统</h1>
                        <div class="user-info col-3">
                            <?php if($user) {?>
                            <span class="user-name"><?=$user["Username"]?></span>
                             <a href="logout.php">退出登录</a>
                            <?php }else{?>
                                <span class="user-name">访客</span>
                             <a href="login.html">请登录</a>
                            <?php }?>
                </div>
            </div>
            <div id="main-menu">
                <ul class="topMenu">
                    <li><span>首页</span></li>
                    <li><a href="list.php">文章</a></li>
                    <li>
                        <span>管理</span>
                        <ul>
                            <li><span>用户</span></li>
                            <li>
                                <span>基础数据</span>
                                <ul>
                                    <li>皮肤管理</li>
                                    <li>兴趣管理</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">

        </script>
            <div id="workspace">
              <h1>文章列表</h1>
              <div></div>
                <a href="list.php?themes=default">列表</a>
                <a href="list.php?themes=card">卡片</a>
                <div class="table" >
                    <div class="thead">
                        <div class="tr">
                            <div class="th"><span class="">标题</span></div>
                            <div class="th">作者</div>
                            <div class="th">时间</div>
                            <div class="th">操作</div>
                        </div>
                    </div>
                    <div class="tbody">
                        <?php foreach($rows as $row){?>
                        <div class="tr">
                            <div class="td Title">
                                <?=$row["Title"]?> 
                        </div>
                            <div class="td">
                                <?=$row["AuthorName"]?>
                            </div>                          
                            <div class="td">
                                <?=$row["UpdateTime"]?><br/>
                                <?=$row["CreateTime"]?>
                            </div>
                        <div class="td">
                            <a href="detail.php?Id=<?=$row["Id"]?>"> 详细</a>
                            <?php if($userId===$row["AuthorId"]) {?>
                            <a href="modify.php?Id=<?=$row["Id"]?>"> 修改</a> 
                            删除
                            <?php } ?>
                        </div>
                    </div>
                <?php }?>
            </div>
        
        
                </div>
                 <div id="recordInfo">
                                共<?=$total ?>条记录，共<?=$pageCount?>页当前为<input type='text' value="2" value="<?=$pageIndex?>"/>页,
                                <a href="list.php?<?=makePageUrl(1)?>">首页</a>
                                <?php for($i=1;$i<=$pageCount;$i++){?>
                                    <a href="list.php?<?=makePageUrl($i)?>"><?=$i ?></a>

                                <?php } ?>
                                <a href="list.php?<?=makePageUrl($pageCount)?>">尾页</a>
            </div>
            <div id="footer">
        </div>
            <div style="display:none;">
          
            <a href="article_add.php">新建文章</a>
            <input type="text"   name="Title" id="keyword" value="" />
            <script type="text/javascript">
            document.getElementById("keyword").onblur = function(){
                var key = document.getElementById("keyword").value;
            }
            function searchkey(key,node){
                if(!node)node = document.body;
                for(let i=0,j=node.childNodes.length;i<j;i++){
                    let child = node.childNodes[i];
                    let val = child.nodeValue;
                    if(!val){
                        if(child.childNodes && child.childNodes.length){
                            searchkey(key, child);
                        }else continue;
                    }else {
                        var hasKey = val.indezOf(key)>=0;
                        if(hasKey) node.style.border = "1px solid red";
                    }

                }
            }
            </script>

            <form action="" class="filter" method="GET">
            <span>
                    <label>标题</label>
                    <input type="text" name="Title" id="Title" value="<?=$queryTitle?>" />

            </span>
                <span>
                    <label>作者</label>
                    <input type="text" name="Author" id="Title" value="<?=$queryAuthor?>" />

                </span>
               <span>
                    <label>时间</label>
                    <input type="text" name="minDate" value="<?=$queryMinDate?>"  />
                    -  <input type="text" name="maxDate" value="<?=$queryMaxDate?>"  />

               </span>
                <input type="submit" name="submit" value="搜索"/>
            </form>
            
            <script type="text/javascript">
            function jumpTo(pageIndex){
                var url = "?";
                var form = document.getElementById("form");
                var data = getData(form,{});
                for(var n in data){
                    url +="&"+ n + "=" + data[n];
                }
                url += "&pageIndex=" + pageIndex;
                location.href = url;
            }
            function getDate(form,data){
                for(let i=0,j=form.childNodes.length;i<j;i++){
                    let child = form.childNodes[i];
                    if(child.tagName=="INPUT") data[child.name] = child.value;
                    if(child.childNodes && child.childNodes.length) getDate(child,data);

                }
                return data;
            }
        </script>
            <table border="1">
                <thead>
                    <tr>
                        <th><div class="title">标题</div></th>
                        <th>作者</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($rows as $row){?>
                    
                <tr>
                    <td>
                     <?=$row["Title"]?> 
                    </td>
                    <td>
                    <?=$row["AuthorName"]?>
                    </td>
                    <td>
                    <?=$row["UpdateTime"]?><br/>
                    <?=$row["CreateTime"]?>
                    </td>
                    <td>
                        <a href="detail.php?Id=<?=$row["Id"]?>"> 详细</a>
                        <?php if($userId===$row["AuthorId"]) {?>
                        <a href="modify.php?Id=<?=$row["Id"]?>"> 修改</a> 
                        删除
                        <?php } ?>
                    </td>
                </tr>
                <?php }?>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4">
                            共<?=$total ?>条记录，共<?=$pageCount?>页当前为<input type='text' value="2" value="<?=$pageIndex?>"/>页,
                            <a href="list.php?<?=makePageUrl(1)?>">首页</a>
                            <?php for($i=1;$i<=$pageCount;$i++){?>
                                <a href="list.php?<?=makePageUrl($i)?>"><?=$i ?></a>

                            <?php } ?>
                            <a href="list.php?<?=makePageUrl($pageCount)?>">尾页</a>
                        </td>
                    </tr>
            
                </tfoot>
            </table>
        </body>
</html>